<template>
<div class="rx-datepicker-date">
  	<div class="rx-datepicker-topbar">
			<a class="topbar-btn" @click="getYear(-1)">
        <rx-icon name="rx-bbefore"/>
      </a>
			<a class="topbar-btn" @click="getMonth(-1)">
         <rx-icon name="rx-before"/>  
      </a>
			<div class="topbar-info">
				<span class="pointer">{{year}}</span>
				<span>年</span>
				<span class="pointer">{{month+1}}</span>
				<span>月</span>
			</div>
			<a class="topbar-btn" @click="getMonth(1)">
         <rx-icon name="rx-next"/>
      </a>
			<a class="topbar-btn" @click="getYear(1)">
         <rx-icon name="rx-nnext"/>
      </a>
		</div>

    <table class="date-weeklist">
      <tbody>
        <tr>
          <td  v-for="item in weeks" :key="item" class="date-weeklist__item">{{item}}</td>
        </tr>
      </tbody>
    </table>
		<div class="date-list">
			<table border="0" cellspacing="0" cellpadding="0" class="date-list__table">
				<tbody>
					<tr v-for="(week,index) in days" :class="{hoverd:type==='week'}" :key="index">
						<td v-for="(item,index) in week" :key="index">
							<span class="date-list__table-item"
							:class="{'today': item.time===tTime
							,'active' : item.time===time
							,'otherM': item.day<=0||item.day>lastDay
							,'weekDay':(index+1)%7 === 6 || index%7 === 6}"
							 @click="select(item)">{{item.name}}</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
  </div>
</template>
<script>
var debugging = true;
//选择日期
export default {
  props: {
    value: "",
    type: {
      default() {
        ["date", "week"][0];
      }
    }
  },
  data() {
    var today = new Date();
    return {
      //今天的年月日
      tTime: new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate()
      ).getTime(),
      //星期
      weeks: ["一", "二", "三", "四", "五", "六", "日"],
      //当前选中的日期
      time: "",
      //显示的日期
      year: "",
      month: "",
      days: [],
      lastDay: ""
    };
  },
  methods: {
    getYear(num) {
      num = +num;
      var year = (this.year = +this.year + num),
        month = this.month;
      this.days = getDays(year, month);
      this.lastDay = new Date(year, month + 1, 0).getDate();
    },
    getMonth(num) {
      num = +num;
      var year = this.year,
        month = +this.month + num;
      this.days = getDays(year, month);
      var lastDate = new Date(year, month + 1, 0);
      this.lastDay = lastDate.getDate();
      //跨年，重新赋值年月
      month = this.month = lastDate.getMonth();
      this.year = lastDate.getFullYear();
    },
    select(item) {
      this.$emit("choosed", new Date(item.time));
    },
    empty() {
      this.$emit("select", "");
    },
    getToday() {
      this.$emit("select", new Date());
    }
  },

  created() {
    var year, month;
    var val = this.value;
    if (val) {
      var date = new Date(val);
      year = date.getFullYear();
      month = date.getMonth();
      this.time = date.getTime();
    } else {
      var date = new Date();
      year = date.getFullYear();
      month = date.getMonth();
      this.time = "";
    }

    //根据当前年月生成日历
    this.year = year;
    this.month = month;
    this.days = getDays(year, month);
    this.lastDay = new Date(year, month + 1, 0).getDate();
  }
};

function getDays(year, month) {
  /*
		 * 显示6周
		 * 计算前补多少天
		 */
  var firstDay = new Date(year, month, 1);
  var week = firstDay.getDay();
  //星期天
  if (week == 0) week = 7;
  //补的天数
  var prefill = week - 1;
  if (prefill == 0) prefill = 7;
  //前一天，和最后一天的日期
  var beforeOfFirstDay = new Date(year, month, 0).getDate(),
    lastDay = new Date(year, month + 1, 0).getDate();
  var ret = [];
  for (let i = 1; i <= 42; i++) {
    var day = i - prefill;
    if (day <= 0) {
      //上个月
      day += beforeOfFirstDay;
    } else if (day > lastDay) {
      //下个月
      day -= lastDay;
    }
    ret.push({
      name: day,
      month: month,
      year: year,
      day: i - prefill,
      time: new Date(year, month, day).getTime()
    });
  }
  //		function padding (num) {
  //			if(num<10){
  //				return "0"+num
  //			}
  //			return num
  //		}
  return ret.chunk(7);
}
</script>
<style lang="scss">
.rx-datepicker-date{

  .date-weeklist{
    width: 100%;
  }

  .date-weeklist__item{
    list-style-type: none;
    line-height: 20px;
    border-radius: 2px;
    text-align: center;
    background: #ffffff;
    color: #333333;
    border: 1px solid #ffffff;
    padding: 5px 0;
  }
  .date-list__table{
    width: 100%;
    text-align: center;
  }
  .date-list__table-item{
    width: 22px;
    line-height: 20px;
    border-radius: 2px;
    text-align: center;
    line-height: 20px;
    background: #ffffff;
    color: #333333;
    border: 1px solid #ffffff;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
  }
}
</style>

